<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>足球比赛记分牌</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#1e40af',
            accent: '#f97316',
            teamA: '#ef4444',
            teamB: '#3b82f6',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'score': '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
          }
        },
      }
    }
  </script>
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
    }
  </style>
</head>
<body class="bg-gray-100 min-h-screen font-sans">
  <div class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <header class="text-center mb-10">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-800 mb-2">
        <i class="fa fa-futbol-o text-primary mr-3"></i>足球比赛记分牌
      </h1>
      <p class="text-gray-600 text-lg">实时记录比赛数据和球员犯规情况</p>
    </header>

    <!-- 记分牌主体 -->
    <main class="max-w-5xl mx-auto space-y-8">
      <!-- 比赛信息和比分 -->
      <section class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
        <div class="flex flex-col md:flex-row justify-between items-center mb-6">
          <div class="text-center md:text-left mb-4 md:mb-0">
            <h2 class="text-xl font-semibold text-gray-700">比赛信息</h2>
            <div class="mt-2 flex flex-wrap items-center justify-center md:justify-start gap-2">
              <div class="bg-gray-100 px-3 py-1 rounded-full text-sm text-gray-700 flex items-center">
                <i class="fa fa-calendar-o mr-2"></i>
                <span id="match-date">2025-01-01</span>
              </div>
              <div class="bg-gray-100 px-3 py-1 rounded-full text-sm text-gray-700 flex items-center">
                <i class="fa fa-clock-o mr-2"></i>
                <span id="match-time">19:30</span>
              </div>
              <div class="bg-primary/10 px-3 py-1 rounded-full text-sm font-medium text-primary flex items-center">
                <i class="fa fa-flag mr-2"></i>
                <span id="match-half">第1半场</span>
              </div>
            </div>
          </div>
          <div class="flex space-x-3">
            <button id="reset-score" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center">
              <i class="fa fa-refresh mr-2"></i>重置比分
            </button>
            <button id="save-match" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center">
              <i class="fa fa-save mr-2"></i>保存比赛
            </button>
          </div>
        </div>

        <!-- 比分显示 -->
        <div class="relative overflow-hidden rounded-xl bg-gradient-to-r from-gray-800 to-gray-900 p-1">
          <div class="grid grid-cols-12 gap-4 items-center bg-gray-100 rounded-lg p-4 md:p-6">
            <!-- 主队 -->
            <div class="col-span-5 flex items-center justify-end">
              <div class="text-right mr-4">
                <h3 class="text-2xl md:text-3xl font-bold text-gray-800" id="team-a-name">主队</h3>
                <div class="flex items-center justify-end mt-1">
                  <div class="flex space-x-1">
                    <i class="fa fa-square text-teamA" id="team-a-card-1"></i>
                    <i class="fa fa-square text-teamA" id="team-a-card-2"></i>
                    <i class="fa fa-square text-teamA" id="team-a-card-3"></i>
                  </div>
                  <span class="ml-2 text-sm text-gray-600">红牌: <span id="team-a-red-cards">0</span></span>
                </div>
              </div>
              <div class="w-16 h-16 bg-teamA rounded-full flex items-center justify-center shadow-lg">
                <span class="text-white text-xl font-bold">A</span>
              </div>
            </div>

            <!-- 比分 -->
            <div class="col-span-2 flex flex-col items-center">
              <div class="text-center">
                <div class="flex items-end justify-center">
                  <span class="text-4xl md:text-6xl font-bold text-gray-800" id="team-a-score">0</span>
                  <span class="text-2xl md:text-4xl font-bold text-gray-600 mx-1">:</span>
                  <span class="text-4xl md:text-6xl font-bold text-gray-800" id="team-b-score">0</span>
                </div>
                <!-- 倒计时显示 -->
                <div id="countdown-display" class="mt-2 text-xl md:text-2xl font-bold text-primary">
                  45:00
                </div>
                <div class="mt-2 bg-primary/10 px-3 py-1 rounded-full inline-flex items-center">
                  <div id="status-indicator" class="w-3 h-3 bg-gray-500 rounded-full mr-2"></div>
                  <span id="match-status" class="text-sm font-medium text-primary">已暂停</span>
                </div>
              </div>
            </div>

            <!-- 客队 -->
            <div class="col-span-5 flex items-center">
              <div class="w-16 h-16 bg-teamB rounded-full flex items-center justify-center shadow-lg">
                <span class="text-white text-xl font-bold">B</span>
              </div>
              <div class="text-left ml-4">
                <h3 class="text-2xl md:text-3xl font-bold text-gray-800" id="team-b-name">客队</h3>
                <div class="flex items-center mt-1">
                  <span class="text-sm text-gray-600">红牌: <span id="team-b-red-cards">0</span></span>
                  <div class="flex space-x-1 ml-2">
                    <i class="fa fa-square text-teamB" id="team-b-card-1"></i>
                    <i class="fa fa-square text-teamB" id="team-b-card-2"></i>
                    <i class="fa fa-square text-teamB" id="team-b-card-3"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 比分控制 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
          <div class="flex justify-end md:justify-center space-x-2">
            <button class="bg-teamA hover:bg-teamA/90 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center" id="decrease-team-a">
              <i class="fa fa-minus mr-1"></i> 减分
            </button>
            <button class="bg-teamA hover:bg-teamA/90 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center" id="increase-team-a">
              <i class="fa fa-plus mr-1"></i> 加分
            </button>
          </div>
          
          <!-- 倒计时控制 -->
          <div class="flex flex-wrap justify-center items-center gap-2 mt-3 md:mt-0">
            <div class="flex items-center space-x-2 mr-2">
              <label class="text-sm font-medium text-gray-700">时长:</label>
              <select id="match-duration" class="block px-3 py-1 text-sm border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary rounded-lg">
                <option value="45">45分钟</option>
                <option value="30">30分钟</option>
                <option value="20">20分钟</option>
                <option value="15">15分钟</option>
              </select>
            </div>
            <button id="toggle-timer" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center">
              <i class="fa fa-play mr-2"></i> 开始
            </button>
            <button id="reset-timer" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center">
              <i class="fa fa-refresh mr-2"></i> 重置
            </button>
            <button id="toggle-half" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center">
              <i class="fa fa-exchange mr-2"></i> 换半场
            </button>
          </div>
          
          <div class="flex justify-start md:justify-center space-x-2">
            <button class="bg-teamB hover:bg-teamB/90 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center" id="increase-team-b">
              <i class="fa fa-plus mr-1"></i> 加分
            </button>
            <button class="bg-teamB hover:bg-teamB/90 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center" id="decrease-team-b">
              <i class="fa fa-minus mr-1"></i> 减分
            </button>
          </div>
        </div>
      </section>

      <!-- 球员管理 -->
      <section class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
        <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
          <i class="fa fa-users text-primary mr-3"></i>球员管理
        </h2>

        <!-- 团队选择器 -->
        <div class="mb-6">
          <div class="flex flex-wrap gap-4">
            <div class="flex-1 min-w-[200px]">
              <label class="block text-sm font-medium text-gray-700 mb-1">选择队伍</label>
              <div class="relative">
                <select id="team-selector" class="block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary rounded-lg appearance-none -webkit-appearance-none">
                  <option value="team-a">主队</option>
                  <option value="team-b">客队</option>
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                  <i class="fa fa-chevron-down text-gray-400"></i>
                </div>
              </div>
            </div>
            <div class="flex-1 min-w-[200px]">
              <label class="block text-sm font-medium text-gray-700 mb-1">球员编号</label>
              <input type="number" id="player-number" class="block w-full pl-3 pr-3 py-3 text-base border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary rounded-lg" placeholder="输入球衣号码">
            </div>
            <div class="flex-1 min-w-[200px]">
              <label class="block text-sm font-medium text-gray-700 mb-1">球员姓名</label>
              <input type="text" id="player-name" class="block w-full pl-3 pr-3 py-3 text-base border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary rounded-lg" placeholder="输入球员姓名">
            </div>
            <div class="flex items-end min-w-[120px]">
              <button id="add-player" class="w-full bg-primary hover:bg-secondary text-white px-4 py-3 rounded-lg transition duration-300 flex items-center justify-center">
                <i class="fa fa-plus mr-2"></i> 添加球员
              </button>
            </div>
          </div>
        </div>

        <!-- 球员列表 -->
        <div class="grid grid-cols-1 gap-6">
          <!-- 主队球员 -->
          <div>
            <h3 class="text-xl font-semibold text-teamA mb-4 flex items-center">
              <i class="fa fa-user-circle mr-2"></i>主队球员
            </h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">编号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">黄牌</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">红牌</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody id="team-a-players" class="bg-white divide-y divide-gray-200">
                  <!-- 主队球员将通过JS动态添加 -->
                </tbody>
              </table>
            </div>
          </div>

          <!-- 客队球员 -->
          <div>
            <h3 class="text-xl font-semibold text-teamB mb-4 flex items-center">
              <i class="fa fa-user-circle mr-2"></i>客队球员
            </h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">编号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">黄牌</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">红牌</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody id="team-b-players" class="bg-white divide-y divide-gray-200">
                  <!-- 客队球员将通过JS动态添加 -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <!-- 比赛统计 -->
      <section class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
        <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
          <i class="fa fa-bar-chart text-primary mr-3"></i>比赛统计
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="bg-gray-50 p-4 rounded-xl">
            <h3 class="text-lg font-semibold text-teamA mb-3">主队统计</h3>
            <ul class="space-y-2">
              <li class="flex justify-between items-center">
                <span class="text-gray-700">总进球数</span>
                <span class="font-semibold" id="team-a-goals">0</span>
              </li>
              <li class="flex justify-between items-center">
                <span class="text-gray-700">总黄牌数</span>
                <span class="font-semibold text-yellow-500" id="team-a-yellow-cards">0</span>
              </li>
              <li class="flex justify-between items-center">
                <span class="text-gray-700">总红牌数</span>
                <span class="font-semibold text-red-500" id="team-a-total-red-cards">0</span>
              </li>
              <li class="flex justify-between items-center">
                <span class="text-gray-700">上场球员</span>
                <span class="font-semibold" id="team-a-player-count">0</span>
              </li>
            </ul>
          </div>
          <div class="bg-gray-50 p-4 rounded-xl">
            <h3 class="text-lg font-semibold text-teamB mb-3">客队统计</h3>
            <ul class="space-y-2">
              <li class="flex justify-between items-center">
                <span class="text-gray-700">总进球数</span>
                <span class="font-semibold" id="team-b-goals">0</span>
              </li>
              <li class="flex justify-between items-center">
                <span class="text-gray-700">总黄牌数</span>
                <span class="font-semibold text-yellow-500" id="team-b-yellow-cards">0</span>
              </li>
              <li class="flex justify-between items-center">
                <span class="text-gray-700">总红牌数</span>
                <span class="font-semibold text-red-500" id="team-b-total-red-cards">0</span>
              </li>
              <li class="flex justify-between items-center">
                <span class="text-gray-700">上场球员</span>
                <span class="font-semibold" id="team-b-player-count">0</span>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="text-center mt-12 text-gray-600">
      <p>© 2025 足球比赛记分牌系统</p>
    </footer>
  </div>

  <!-- JavaScript -->
  <script>
    // 初始化数据
    const matchData = {
      date: new Date().toISOString().split('T')[0],
      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
      currentHalf: 1,
      isTimerRunning: false,
      matchDuration: 45 * 60, // 默认45分钟
      remainingTime: 45 * 60,
      teams: {
        'team-a': {
          name: '主队',
          score: 0,
          players: [],
          totalYellowCards: 0,
          totalRedCards: 0
        },
        'team-b': {
          name: '客队',
          score: 0,
          players: [],
          totalYellowCards: 0,
          totalRedCards: 0
        }
      }
    };
    
    // 倒计时相关变量
    let countdownInterval = null;

    // DOM 元素
    const teamAScoreEl = document.getElementById('team-a-score');
    const teamBScoreEl = document.getElementById('team-b-score');
    const increaseTeamAEl = document.getElementById('increase-team-a');
    const decreaseTeamAEl = document.getElementById('decrease-team-a');
    const increaseTeamBEl = document.getElementById('increase-team-b');
    const decreaseTeamBEl = document.getElementById('decrease-team-b');
    const resetScoreEl = document.getElementById('reset-score');
    const saveMatchEl = document.getElementById('save-match');
    const matchDateEl = document.getElementById('match-date');
    const matchTimeEl = document.getElementById('match-time');
    const teamASelectorEl = document.getElementById('team-selector');
    const playerNumberEl = document.getElementById('player-number');
    const playerNameEl = document.getElementById('player-name');
    const addPlayerEl = document.getElementById('add-player');
    const teamAPlayersEl = document.getElementById('team-a-players');
    const teamBPlayersEl = document.getElementById('team-b-players');
    const teamANameEl = document.getElementById('team-a-name');
    const teamBNameEl = document.getElementById('team-b-name');
    
    // 倒计时相关元素
    const countdownDisplayEl = document.getElementById('countdown-display');
    const toggleTimerEl = document.getElementById('toggle-timer');
    const resetTimerEl = document.getElementById('reset-timer');
    const toggleHalfEl = document.getElementById('toggle-half');
    const matchDurationEl = document.getElementById('match-duration');
    const statusIndicatorEl = document.getElementById('status-indicator');
    const matchStatusEl = document.getElementById('match-status');
    const matchHalfEl = document.getElementById('match-half');
    
    // 统计元素
    const teamAStats = {
      goals: document.getElementById('team-a-goals'),
      yellowCards: document.getElementById('team-a-yellow-cards'),
      redCards: document.getElementById('team-a-total-red-cards'),
      playerCount: document.getElementById('team-a-player-count')
    };
    
    const teamBStats = {
      goals: document.getElementById('team-b-goals'),
      yellowCards: document.getElementById('team-b-yellow-cards'),
      redCards: document.getElementById('team-b-total-red-cards'),
      playerCount: document.getElementById('team-b-player-count')
    };

    // 红牌显示元素
    const teamARedCardEls = [
      document.getElementById('team-a-card-1'),
      document.getElementById('team-a-card-2'),
      document.getElementById('team-a-card-3')
    ];
    
    const teamBRedCardEls = [
      document.getElementById('team-b-card-1'),
      document.getElementById('team-b-card-2'),
      document.getElementById('team-b-card-3')
    ];

    const teamARedCardsEl = document.getElementById('team-a-red-cards');
    const teamBRedCardsEl = document.getElementById('team-b-red-cards');

    // 初始化日期和时间
    matchDateEl.textContent = matchData.date;
    matchTimeEl.textContent = matchData.time;
    teamANameEl.textContent = matchData.teams['team-a'].name;
    teamBNameEl.textContent = matchData.teams['team-b'].name;

    // 更新比分显示
    function updateScoreDisplay() {
      teamAScoreEl.textContent = matchData.teams['team-a'].score;
      teamBScoreEl.textContent = matchData.teams['team-b'].score;
      
      // 更新统计
      teamAStats.goals.textContent = matchData.teams['team-a'].score;
      teamBStats.goals.textContent = matchData.teams['team-b'].score;
    }

    // 更新红牌显示
    function updateRedCardsDisplay() {
      // 主队红牌
      teamARedCardsEl.textContent = matchData.teams['team-a'].totalRedCards;
      teamARedCardEls.forEach((el, index) => {
        if (index < matchData.teams['team-a'].totalRedCards) {
          el.className = 'fa fa-square text-red-500';
        } else {
          el.className = 'fa fa-square text-teamA';
        }
      });
      
      // 客队红牌
      teamBRedCardsEl.textContent = matchData.teams['team-b'].totalRedCards;
      teamBRedCardEls.forEach((el, index) => {
        if (index < matchData.teams['team-b'].totalRedCards) {
          el.className = 'fa fa-square text-red-500';
        } else {
          el.className = 'fa fa-square text-teamB';
        }
      });
    }

    // 更新统计信息
    function updateStats() {
      // 主队统计
      teamAStats.yellowCards.textContent = matchData.teams['team-a'].totalYellowCards;
      teamAStats.redCards.textContent = matchData.teams['team-a'].totalRedCards;
      teamAStats.playerCount.textContent = matchData.teams['team-a'].players.length;
      
      // 客队统计
      teamBStats.yellowCards.textContent = matchData.teams['team-b'].totalYellowCards;
      teamBStats.redCards.textContent = matchData.teams['team-b'].totalRedCards;
      teamBStats.playerCount.textContent = matchData.teams['team-b'].players.length;
    }

    // 添加球员到表格
    function addPlayerToTable(teamId, player) {
      const tableBody = teamId === 'team-a' ? teamAPlayersEl : teamBPlayersEl;
      
      const row = document.createElement('tr');
      row.dataset.playerId = player.id;
      row.className = 'hover:bg-gray-50 transition-colors';
      
      row.innerHTML = `
        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${player.number}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${player.name}</td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="flex items-center">
            <button class="add-yellow-card bg-yellow-100 hover:bg-yellow-200 text-yellow-700 px-2 py-1 rounded mr-2 transition-colors" data-team="${teamId}" data-player="${player.id}">
              <i class="fa fa-plus"></i>
            </button>
            <span class="yellow-count text-yellow-600 font-medium">${player.yellowCards}</span>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="flex items-center">
            <button class="add-red-card bg-red-100 hover:bg-red-200 text-red-700 px-2 py-1 rounded mr-2 transition-colors" data-team="${teamId}" data-player="${player.id}">
              <i class="fa fa-plus"></i>
            </button>
            <span class="red-count text-red-600 font-medium">${player.redCards}</span>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
          <button class="remove-player text-red-500 hover:text-red-700 transition-colors" data-team="${teamId}" data-player="${player.id}">
            <i class="fa fa-trash mr-1"></i> 删除
          </button>
        </td>
      `;
      
      tableBody.appendChild(row);
      
      // 添加事件监听器
      row.querySelector('.add-yellow-card').addEventListener('click', handleAddYellowCard);
      row.querySelector('.add-red-card').addEventListener('click', handleAddRedCard);
      row.querySelector('.remove-player').addEventListener('click', handleRemovePlayer);
    }

    // 渲染球员列表
    function renderPlayerList(teamId) {
      const tableBody = teamId === 'team-a' ? teamAPlayersEl : teamBPlayersEl;
      tableBody.innerHTML = '';
      
      matchData.teams[teamId].players.forEach(player => {
        addPlayerToTable(teamId, player);
      });
    }

    // 检查球员是否已存在
    function isPlayerExists(teamId, playerNumber) {
      return matchData.teams[teamId].players.some(p => p.number === playerNumber);
    }

    // 添加球员处理函数
    function handleAddPlayer() {
      const teamId = teamASelectorEl.value;
      const playerNumber = parseInt(playerNumberEl.value);
      const playerName = playerNameEl.value.trim();
      
      if (!playerNumber || !playerName) {
        alert('请输入完整的球员信息');
        return;
      }
      
      if (isPlayerExists(teamId, playerNumber)) {
        alert('该球衣号码的球员已存在');
        return;
      }
      
      const newPlayer = {
        id: Date.now().toString(),
        number: playerNumber,
        name: playerName,
        yellowCards: 0,
        redCards: 0
      };
      
      matchData.teams[teamId].players.push(newPlayer);
      
      // 渲染更新
      addPlayerToTable(teamId, newPlayer);
      updateStats();
      
      // 清空输入
      playerNumberEl.value = '';
      playerNameEl.value = '';
      
      // 添加动画效果
      const row = document.querySelector(`tr[data-player-id="${newPlayer.id}"]`);
      row.classList.add('animate-pulse');
      setTimeout(() => {
        row.classList.remove('animate-pulse');
      }, 1000);
    }

    // 添加黄牌处理函数
    function handleAddYellowCard(event) {
      const teamId = event.currentTarget.dataset.team;
      const playerId = event.currentTarget.dataset.player;
      const player = matchData.teams[teamId].players.find(p => p.id === playerId);
      
      if (player) {
        player.yellowCards++;
        matchData.teams[teamId].totalYellowCards++;
        
        // 更新UI
        event.currentTarget.nextElementSibling.textContent = player.yellowCards;
        updateStats();
        
        // 动画效果
        event.currentTarget.parentElement.classList.add('animate-pulse');
        setTimeout(() => {
          event.currentTarget.parentElement.classList.remove('animate-pulse');
        }, 500);
      }
    }

    // 添加红牌处理函数
    function handleAddRedCard(event) {
      const teamId = event.currentTarget.dataset.team;
      const playerId = event.currentTarget.dataset.player;
      const player = matchData.teams[teamId].players.find(p => p.id === playerId);
      
      if (player && player.redCards < 1) { // 最多1张红牌
        player.redCards++;
        matchData.teams[teamId].totalRedCards++;
        
        // 更新UI
        event.currentTarget.nextElementSibling.textContent = player.redCards;
        updateStats();
        updateRedCardsDisplay();
        
        // 动画效果
        event.currentTarget.parentElement.classList.add('animate-pulse');
        setTimeout(() => {
          event.currentTarget.parentElement.classList.remove('animate-pulse');
        }, 500);
      }
    }

    // 删除球员处理函数
    function handleRemovePlayer(event) {
      const teamId = event.currentTarget.dataset.team;
      const playerId = event.currentTarget.dataset.player;
      const player = matchData.teams[teamId].players.find(p => p.id === playerId);
      
      if (player) {
        // 减少统计
        matchData.teams[teamId].totalYellowCards -= player.yellowCards;
        matchData.teams[teamId].totalRedCards -= player.redCards;
        
        // 移除球员
        matchData.teams[teamId].players = matchData.teams[teamId].players.filter(p => p.id !== playerId);
        
        // 更新UI
        const row = document.querySelector(`tr[data-player-id="${playerId}"]`);
        row.classList.add('opacity-0', 'transition-opacity', 'duration-300');
        setTimeout(() => {
          row.remove();
          updateStats();
          updateRedCardsDisplay();
        }, 300);
      }
    }

    // 格式化时间显示（秒 -> MM:SS）
    function formatTime(seconds) {
      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }
    
    // 更新倒计时显示
    function updateCountdownDisplay() {
      countdownDisplayEl.textContent = formatTime(matchData.remainingTime);
      
      // 根据剩余时间添加视觉提示
      if (matchData.remainingTime <= 60) {
        countdownDisplayEl.classList.add('text-red-500', 'animate-pulse');
      } else {
        countdownDisplayEl.classList.remove('text-red-500', 'animate-pulse');
      }
    }
    
    // 更新比赛状态显示
    function updateMatchStatus() {
      if (matchData.isTimerRunning) {
        toggleTimerEl.innerHTML = '<i class="fa fa-pause mr-2"></i> 暂停';
        toggleTimerEl.classList.remove('bg-green-500', 'hover:bg-green-600');
        toggleTimerEl.classList.add('bg-amber-500', 'hover:bg-amber-600');
        statusIndicatorEl.className = 'w-3 h-3 bg-green-500 rounded-full mr-2 animate-pulse';
        matchStatusEl.textContent = '正在进行';
      } else {
        toggleTimerEl.innerHTML = '<i class="fa fa-play mr-2"></i> 开始';
        toggleTimerEl.classList.remove('bg-amber-500', 'hover:bg-amber-600');
        toggleTimerEl.classList.add('bg-green-500', 'hover:bg-green-600');
        statusIndicatorEl.className = 'w-3 h-3 bg-gray-500 rounded-full mr-2';
        matchStatusEl.textContent = '已暂停';
      }
      
      matchHalfEl.textContent = `第${matchData.currentHalf}半场`;
    }
    
    // 切换倒计时
    function toggleTimer() {
      if (matchData.isTimerRunning) {
        // 暂停倒计时
        clearInterval(countdownInterval);
        matchData.isTimerRunning = false;
      } else {
        // 开始倒计时
        if (matchData.remainingTime <= 0) {
          // 如果时间到了，重置为半场时长
          matchData.remainingTime = matchData.matchDuration;
        }
        
        countdownInterval = setInterval(() => {
          if (matchData.remainingTime > 0) {
            matchData.remainingTime--;
            updateCountdownDisplay();
          } else {
            // 时间到
            clearInterval(countdownInterval);
            matchData.isTimerRunning = false;
            updateMatchStatus();
            
            // 时间到提醒
            countdownDisplayEl.classList.add('text-red-500', 'animate-bounce');
            setTimeout(() => {
              countdownDisplayEl.classList.remove('animate-bounce');
            }, 2000);
          }
        }, 1000);
        
        matchData.isTimerRunning = true;
      }
      
      updateMatchStatus();
    }
    
    // 重置倒计时
    function resetTimer() {
      clearInterval(countdownInterval);
      matchData.isTimerRunning = false;
      matchData.remainingTime = matchData.matchDuration;
      updateCountdownDisplay();
      updateMatchStatus();
    }
    
    // 切换半场
    function toggleHalf() {
      clearInterval(countdownInterval);
      matchData.isTimerRunning = false;
      matchData.currentHalf = matchData.currentHalf === 1 ? 2 : 1;
      matchData.remainingTime = matchData.matchDuration;
      updateCountdownDisplay();
      updateMatchStatus();
      
      // 添加视觉反馈
      matchHalfEl.classList.add('animate-pulse');
      setTimeout(() => {
        matchHalfEl.classList.remove('animate-pulse');
      }, 1000);
    }
    
    // 设置比赛时长
    function setMatchDuration() {
      const minutes = parseInt(matchDurationEl.value);
      matchData.matchDuration = minutes * 60;
      
      // 如果当前没有运行计时器，更新剩余时间
      if (!matchData.isTimerRunning) {
        matchData.remainingTime = matchData.matchDuration;
        updateCountdownDisplay();
      }
    }

    // 事件监听器
    increaseTeamAEl.addEventListener('click', () => {
      matchData.teams['team-a'].score++;
      updateScoreDisplay();
      teamAScoreEl.classList.add('scale-125', 'transition-transform', 'duration-200');
      setTimeout(() => {
        teamAScoreEl.classList.remove('scale-125', 'transition-transform', 'duration-200');
      }, 200);
    });

    decreaseTeamAEl.addEventListener('click', () => {
      if (matchData.teams['team-a'].score > 0) {
        matchData.teams['team-a'].score--;
        updateScoreDisplay();
      }
    });

    increaseTeamBEl.addEventListener('click', () => {
      matchData.teams['team-b'].score++;
      updateScoreDisplay();
      teamBScoreEl.classList.add('scale-125', 'transition-transform', 'duration-200');
      setTimeout(() => {
        teamBScoreEl.classList.remove('scale-125', 'transition-transform', 'duration-200');
      }, 200);
    });

    decreaseTeamBEl.addEventListener('click', () => {
      if (matchData.teams['team-b'].score > 0) {
        matchData.teams['team-b'].score--;
        updateScoreDisplay();
      }
    });

    saveMatchEl.addEventListener('click', () => {
      alert('比赛数据已保存！\n\n在实际应用中，这里会将数据保存到服务器或本地存储。');
      
      // 添加动画效果
      saveMatchEl.classList.add('bg-green-600');
      setTimeout(() => {
        saveMatchEl.classList.remove('bg-green-600');
      }, 500);
    });

    addPlayerEl.addEventListener('click', handleAddPlayer);

    // 按Enter键添加球员
    playerNameEl.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        handleAddPlayer();
      }
    });

    // 事件监听器 - 倒计时控制
    toggleTimerEl.addEventListener('click', toggleTimer);
    resetTimerEl.addEventListener('click', resetTimer);
    toggleHalfEl.addEventListener('click', toggleHalf);
    matchDurationEl.addEventListener('change', setMatchDuration);
    
    // 重置比分时同时重置计时器
    resetScoreEl.addEventListener('click', () => {
      if (confirm('确定要重置比分吗？这将清除所有比赛数据。')) {
        // 清除计时器
        clearInterval(countdownInterval);
        
        // 重置数据
        matchData.teams['team-a'].score = 0;
        matchData.teams['team-b'].score = 0;
        matchData.teams['team-a'].players = [];
        matchData.teams['team-b'].players = [];
        matchData.teams['team-a'].totalYellowCards = 0;
        matchData.teams['team-a'].totalRedCards = 0;
        matchData.teams['team-b'].totalYellowCards = 0;
        matchData.teams['team-b'].totalRedCards = 0;
        
        // 重置计时
        matchData.isTimerRunning = false;
        matchData.currentHalf = 1;
        matchData.remainingTime = matchData.matchDuration;
        
        // 更新UI
        updateScoreDisplay();
        renderPlayerList('team-a');
        renderPlayerList('team-b');
        updateStats();
        updateRedCardsDisplay();
        updateCountdownDisplay();
        updateMatchStatus();
        
        // 动画效果
        const scoreSection = document.querySelector('.relative.overflow-hidden');
        scoreSection.classList.add('animate-pulse');
        setTimeout(() => {
          scoreSection.classList.remove('animate-pulse');
        }, 1000);
      }
    });
    
    // 初始化显示
    updateScoreDisplay();
    updateStats();
    updateRedCardsDisplay();
    updateCountdownDisplay();
    updateMatchStatus();
  </script>
</body>
</html>